<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>轮播图点击切换</title>
	<style>
		* {
			box-sizing: border-box;
		}

		.slider {
			width: 560px;
			height: 400px;
			overflow: hidden;
		}

		.slider-wrapper {
			width: 100%;
			height: 320px;
		}

		.slider-wrapper img {
			width: 100%;
			height: 100%;
			display: block;
		}

		.slider-footer {
			height: 80px;
			background-color: rgb(100, 67, 68);
			padding: 12px 12px 0 12px;
			position: relative;
		}

		.slider-footer .toggle {
			position: absolute;
			right: 0;
			top: 12px;
			display: flex;
		}

		.slider-footer .toggle button {
			margin-right: 12px;
			width: 28px;
			height: 28px;
			appearance: none;
			border: none;
			background: rgba(255, 255, 255, 0.1);
			color: #fff;
			border-radius: 4px;
			cursor: pointer;
		}

		.slider-footer .toggle button:hover {
			background: rgba(255, 255, 255, 0.2);
		}

		.slider-footer p {
			margin: 0;
			color: #fff;
			font-size: 18px;
			margin-bottom: 10px;
		}

		.slider-indicator {
			margin: 0;
			padding: 0;
			list-style: none;
			display: flex;
			align-items: center;
		}

		.slider-indicator li {
			width: 8px;
			height: 8px;
			margin: 4px;
			border-radius: 50%;
			background: #fff;
			opacity: 0.4;
			cursor: pointer;
		}

		.slider-indicator li.active {
			width: 12px;
			height: 12px;
			opacity: 1;
		}
	</style>
</head>

<body>
<div class="slider">
	<div class="slider-wrapper">
		<img src="./images/slider01.jpg" alt="" />
	</div>
	<div class="slider-footer">
		<p>对人类来说会不会太超前了？</p>
		<ul class="slider-indicator">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<div class="toggle">
			<button class="prev"><</button>
			<button class="next">></button>
		</div>
	</div>
</div>
<script>
</script>
</body>

</html>